<template>
  <div class="clock-solar">
    <!-- 刻度轮 -->
    <div
      :class="`scales-${item.unit} scales`"
      v-for="(item, index) in dialPlate"
      :key="index"
      :style="{
        transform: `rotate(${
          isAnimationOver ? (360 / item.scales.length) * item.deg : 0
        }deg)`
      }"
      :ref="item.unit"
    >
      <!-- 刻度 -->
      <div
        :class="`scale-${item.unit} scale`"
        v-for="(itemSon, indexSon) in item.scales"
        :key="indexSon"
        :style="{
          transform: `rotate(${-(360 / item.scales.length) *
            indexSon}deg) translate(0, -50%)`
        }"
      >
        <!-- 离心距 -->
        <div :class="`eccentricity-${item.unit} eccentricity`" />
        <!-- 刻度值 -->
        <div
          class="scale-value"
          :class="{ 'time-now': itemSon === item.current && isAnimationOver }"
        >
          <!-- 刻度文字 -->
          <div v-for="(value, indexVal) in itemSon" :key="indexVal">
            {{ value }}
          </div>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <el-button type="primary" round class="btn" @click="goLunar"
      >阴历</el-button
    >
    <el-button type="danger" round class="btn back" @click="goBack"
      >返回</el-button
    >
  </div>
</template>

<script>
import { rotateSlow } from '@/utils/animateSlow'
import { getTimeNow, getTimeList } from '@/utils/timeDetail'

export default {
  name: 'ClockSolar',
  data () {
    return {
      timeNow: new Date(), // 当前时间
      timeID: null, // 定时器标识
      isSimplified: true, // 是否切换简体字
      activeWeekScales: [], // 动态星期刻度轮
      activeMonthScales: [], // 动态月份刻度轮
      activeDayScales: [], // 动态日期刻度轮
      activeHourScales: [], // 动态时钟刻度轮
      activeMinuteScales: [], // 动态分钟刻度轮
      activeSecondScales: [], // 动态秒钟刻度轮
      isAnimationOver: false // 动画是否结束
    }
  },
  computed: {
    // 当前时间对象
    timeNowObj () {
      return getTimeNow(this.timeNow)
    },
    // 时间列表
    timeList () {
      return getTimeList(this.timeNowObj.year, this.timeNowObj.month)
    },
    // 星期刻度轮
    weekScales () {
      return this.timeList.weekList
    },
    // 月份刻度轮
    monthScales () {
      return this.timeList.monthList
    },
    // 日期刻度轮
    dayScales () {
      return this.timeList.dayList
    },
    // 时钟刻度轮
    hourScales () {
      return this.timeList.hourList
    },
    // 分钟刻度轮
    minuteScales () {
      return this.timeList.minuteList
    },
    // 秒钟刻度轮
    secondScales () {
      return this.timeList.secondList
    },
    // 刻度表盘
    dialPlate () {
      return [
        {
          scales: this.activeWeekScales,
          unit: 'week',
          current: this.weekScales[this.timeNow.getDay() - 1],
          deg: this.timeNow.getDay() - 1
        },

        {
          scales: this.activeMonthScales,
          unit: 'month',
          current: this.monthScales[this.timeNowObj.month - 1],
          deg: this.timeNowObj.month - 1
        },
        {
          scales: this.activeDayScales,
          unit: 'day',
          current: this.dayScales[this.timeNowObj.day - 1],
          deg: this.timeNowObj.day - 1
        },
        {
          scales: this.activeHourScales,
          unit: 'hour',
          current: this.hourScales[this.timeNowObj.hour],
          deg: this.timeNowObj.hour
        },
        {
          scales: this.activeMinuteScales,
          unit: 'minute',
          current: this.minuteScales[this.timeNowObj.minute],
          deg: this.timeNowObj.minute
        },
        {
          scales: this.activeSecondScales,
          unit: 'second',
          current: this.secondScales[
            (this.timeNowObj.second === 0 ? 60 : this.timeNowObj.second) - 1
          ],
          deg: this.timeNowObj.second - 2 + this.timeNowObj.millisecond / 1000
        }
      ]
    }
  },
  methods: {
    // 预装动态刻度轮
    pushActiveScales () {
      this.weekScales.forEach(() => {
        this.activeWeekScales.push('')
      })
      this.monthScales.forEach(() => {
        this.activeMonthScales.push('')
      })
      this.dayScales.forEach(() => {
        this.activeDayScales.push('')
      })
      this.hourScales.forEach(() => {
        this.activeHourScales.push('')
      })
      this.minuteScales.forEach(() => {
        this.activeMinuteScales.push('')
      })
      this.secondScales.forEach(() => {
        this.activeSecondScales.push('')
      })
    },

    // 填充刻度
    fillScale (arrA, arrB, fps, callBack) {
      let i = 0
      const timeID = setInterval(() => {
        arrA[i] = arrB[i++]
        if (arrA[arrA.length - 1] === arrB[arrB.length - 1]) {
          clearInterval(timeID)
          callBack()
        }
      }, fps)
    },

    // 入场动画
    enterAnimation () {
      this.fillScale(this.activeWeekScales, this.weekScales, 60, () => {
        this.fillScale(this.activeMonthScales, this.monthScales, 45, () => {
          this.fillScale(this.activeDayScales, this.dayScales, 35, () => {
            this.fillScale(this.activeHourScales, this.hourScales, 30, () => {
              this.fillScale(
                this.activeMinuteScales,
                this.minuteScales,
                20,
                () => {
                  this.fillScale(
                    this.activeSecondScales,
                    this.secondScales,
                    20,
                    () => {
                      // 替换结束，刻度轮旋转缓动
                      this.scalesRotateSlow()
                    }
                  )
                }
              )
            })
          })
        })
      })
    },

    // 刻度轮旋转缓动
    scalesRotateSlow () {
      rotateSlow(
        this.$refs.week[0],
        {
          rotate:
            (360 / this.dialPlate[0].scales.length) * this.dialPlate[0].deg,
          fps: 20,
          range: 12
        },
        () => {
          rotateSlow(
            this.$refs.month[0],
            {
              rotate:
                (360 / this.dialPlate[1].scales.length) * this.dialPlate[1].deg,
              fps: 20,
              range: 17
            },
            () => {
              rotateSlow(
                this.$refs.day[0],
                {
                  rotate:
                    (360 / this.dialPlate[2].scales.length) *
                    this.dialPlate[2].deg,
                  fps: 20,
                  range: this.dayScales.length
                },
                () => {
                  rotateSlow(
                    this.$refs.hour[0],
                    {
                      rotate:
                        (360 / this.dialPlate[3].scales.length) *
                        this.dialPlate[3].deg,
                      fps: 20,
                      range: 27
                    },
                    () => {
                      rotateSlow(
                        this.$refs.minute[0],
                        {
                          rotate:
                            (360 / this.dialPlate[4].scales.length) *
                            this.dialPlate[4].deg,
                          fps: 20,
                          range: 30
                        },
                        () => {
                          rotateSlow(
                            this.$refs.second[0],
                            {
                              rotate:
                                (360 / this.dialPlate[5].scales.length) *
                                (this.timeNowObj.second + 3),
                              fps: 20,
                              range: 30
                            },
                            () => {
                              setTimeout(() => {
                                // 缓动动画结束
                                this.isAnimationOver = true
                              }, 1000)
                            }
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    },

    // 更新当前时间
    updateTimeNow () {
      this.timeID = setInterval(() => {
        this.timeNow = new Date()
      }, 1)
    },

    // 跳转到阴历页
    goLunar () {
      this.$router.push({ name: 'clockLunar' })
    },

    // 返回阳历页
    goBack () {
      this.$router.go(-1)
    }
  },
  created () {
    // 实时更新当前时间
    this.updateTimeNow()
    // 预装动态刻度轮
    this.pushActiveScales()
    // 入场动画
    this.enterAnimation()
  },
  beforeDestory () {
    // 移除定时器
    clearInterval(this.timeID)
  }
}
</script>

<style lang="less">
.clock-solar {
  position: relative;
  width: 100%;
  height: 100%;
  // 按钮
  .btn {
    position: absolute;
    top: 50px;
    left: 50px;
  }
  .btn.back {
    top: 100px;
    margin-left: 0px;
  }
  // 刻度轮
  .scales {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    // 刻度
    .scale {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 30px;
      transform-origin: 0 0;
      display: flex;
      // 离心距
      .eccentricity {
        height: 100%;
      }
      // 刻度值
      .scale-value {
        width: 57px;
        height: 100%;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        div {
          font-size: 14px !important;
        }
      }
      // 当前时间
      .time-now {
        color: rgb(252, 1, 26);
      }
    }
  }
  // 星期刻度轮
  .scales-week {
    // 星期刻度离心距
    .eccentricity-week {
      width: 20px;
    }
  }
  // 月份刻度轮
  .scales-month {
    // 月份刻度离心距
    .eccentricity-month {
      width: 82px;
    }
  }
  // 日期刻度轮
  .scales-day {
    // 日期刻度离心距
    .eccentricity-day {
      width: 144px;
    }
  }
  // 时钟刻度轮
  .scales-hour {
    // 时钟刻度离心距
    .eccentricity-hour {
      width: 206px;
    }
  }
  // 分钟刻度轮
  .scales-minute {
    // 分钟刻度离心距
    .eccentricity-minute {
      width: 268px;
    }
  }
  // 秒钟刻度轮
  .scales-second {
    // 秒钟刻度离心距
    .eccentricity-second {
      width: 330px;
    }
  }
}
</style>
